<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page.sync="paginate.currentPage"
    :page-size="paginate.listRows"
    :hide-on-single-page="paginate.hidePage"
    layout="prev, pager, next, jumper"
    :total="paginate.total"
    :class="`pagination-${align}`"
    :style="{
      marginTop: marginTop
    }"
  ></el-pagination>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    // left/center/right
    align: {
      type: String,
      default: 'center'
    },
    marginTop: {
      type: String,
      default: '50px'
    }
  },
  computed: {
    ...mapState('paginate', ['paginate'])
  },
  methods: {
    handleCurrentChange(val) {
      // 更新当前加载的页数
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: val
      })
      window.scrollTo(0, 0)
      // 触发paginate
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style lang="scss">
.el-pagination {
  display: flex;
  align-items: center;
  &.pagination-center {
    justify-content: center;
  }
  &.pagination-left {
    justify-content: flex-start;
  }
  &.pagination-right {
    justify-content: flex-end;
  }
  .el-dialog,
  .el-pager li,
  .btn-next,
  .btn-prev,
  .el-input__inner {
    background: transparent;
  }
  button:disabled {
    background-color: transparent;
  }
}
</style>
